<template>
    <el-dialog v-model="props.show" :title="title" width="500" :before-close="showDialog">
        <el-form :model="form" ref="formRef">
            <el-form-item label="用例名称:" :rules="[
                { required: true, message: '请输入迭代名称！', trigger: 'blur' },
            ]">
                <el-input v-model="form.name" autocomplete="off" placeholder="用例名称" />
            </el-form-item>
            <el-form-item label="请求类型:" :rules="[
                { required: true, message: '请选择请求类型！', trigger: 'blur' },
            ]">
                <el-select v-model="form.type" placeholder="请选择">
                    <el-option v-for="item in configData.typeList" :key="item.value" :label="item.key"
                        :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="接口地址:" :rules="[
                { required: true, message: '请输入接口地址！', trigger: 'blur' },
            ]">
                <el-input v-model="form.apiPath" autocomplete="off" placeholder="接口地址" />
            </el-form-item>
            <el-form-item label="执行状态:" :rules="[
                { required: false, message: '请选择执行状态！', trigger: 'blur' },
            ]">
                <el-select v-model="form.status" placeholder="请选择">
                    <el-option v-for="item in configData.statusList" :key="item.value" :label="item.key"
                        :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="标记备注:">
                <el-input v-model="form.tag" autocomplete="off" placeholder="接口地址" />
            </el-form-item>
            <el-form-item label="执行结果:">
                <el-input v-model="form.result" autocomplete="off" placeholder="接口地址" />
            </el-form-item>
            <el-form-item label="用例等级:" :rules="[
                { required: false, message: '请选择等级！', trigger: 'blur' },
            ]">
                <el-select v-model="form.level" placeholder="请选择">
                    <el-option v-for="item in configData.levelList" :key="item.value" :label="item.key"
                        :value="item.value" />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="showDialog">取消</el-button>
                <el-button type="primary" @click="submit">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, reactive, toRaw, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { testCaseAddService, testCaseUpdateService, testCaseGetConfigDataService } from '@/api/testCaseAPI'

// 定义props，接收父组件传递的参数
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    title: {
        type: String,
        default: '新增'
    },
    caseData: {
        type: Object,
        default: () => ({})
    }
})

const formRef = ref(null)
const form = reactive(props.caseData)
const emit = defineEmits(['close'])
const configData = ref({})

// 关闭弹窗
const showDialog = () => {
    emit('close');
}

// 提交表单
const submit = async () => {
    if (props.title === '新增') {
        await testCaseAddService(form);
        ElMessage({
            type: 'success',
            message: '新增成功'
        });
    } else {
        await testCaseUpdateService(form);
        ElMessage({
            type: 'success',
            message: '更新成功'
        });
    }

    emit('close');
}

onMounted(async () => {
    if (props.title != '新增') {
        Object.assign(form, toRaw(props.caseData))
    }

    await testCaseGetConfigDataService().then(res => {
        configData.value = res.data;
    })
})

</script>

<style scoped></style>